<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>

    var data = {
        name: "张三",
        age: 18,
        height: 171,
        weight: 60
    }

    // 给对象中的每个属性添加 拦截器(取值拦截 / 赋值拦截)
    // for (let key in data) { // {name,age,height}
    //     let defaultVal = data[key];   // name,age,height对应的值
    //     Object.defineProperty(data, key, {
    //         get() {  //  // 取值时 直接返回对应的值
    //             console.log("取值拦截", key);
    //             return defaultVal;
    //         },
    //         set(val) {   // 赋值时改变数据 -> 触发页面渲染
    //             console.log("赋值拦截", key);
    //             defaultVal = val;
    //             render();  //数据改变 重新渲染
    //         }
    //     })
    // }
    // console.log(data);

    // 模拟封装 -> 简易版
    // function MyProxy(data){  // 源对象
    //     // {}
    //     // this-> {}   //实例化对象

    //     for (let key in data) { // {name,age,height}
    //         // 给实例化对象 绑定了个目标对象相同的属性的拦截器
    //         Object.defineProperty(this, key, {  
    //             get() {  //  // 取值时 直接返回对应的值
    //                 console.log("取值拦截", key);
    //                 return data[key];
    //             },
    //             set(val) {   // 赋值时改变数据 -> 触发页面渲染
    //                 console.log("赋值拦截", key);
    //                 data[key] = val;
    //             }
    //         })
    //     }


    //     // return this
    // }
    // new MyProxy(data)


    // Proxy  根据传入的对象(目标对象)生成代理对象  => 操作目标对象需要通过代理对象完成
    
    // 注意: new Proxy(data,{}) 没有给代理对象设置拦截功能 -> 所有对代理对象的操作 都会同步给目标对象
    // var obj = new Proxy(data,{}); //代理对象

    // console.log(obj);  
    // console.log(obj === data); 

    // obj.name = "李四";
    // console.log(data.name);


    //  注意: new Proxy(data,{}) 给代理对象设置拦截功能 


    var obj = new Proxy(data,{
        get:function(targetObj,key){  //取值拦截 -> 当对象代理对象进行取值
            // return null;
            console.log("取值拦截");
            return targetObj[key];
        },
        set(targetObj,key,val){
            // return false;
            targetObj[key] = val;
        }
    }); 

    console.log(obj.name);
    console.log(obj.age);

    obj.name = "李四";
    console.log(obj.name);
    console.log(data.name);

</script>

</html>